import React,{Component} from 'react';
import {Breadcrumb,Input,Button,notification} from 'antd';
import service from '../lib/service';

class YachtRentals extends Component{
    state={
        price:'',
        n:0,
        result:{
            prices:[],
            lowerPrice:0,
        }
    }

    getLowPrices(){
        return this.state.result.lowerPrice === 0?<div></div>:
        <div>从第一站到最后一站所需最低价格:{this.state.result.lowerPrice}</div>
    }

    getResult(){
        return this.state.result.prices.length === 0? <div></div> :
        <div>改变后的最低价格矩阵
        {this.getPriceArray(this.state.result.prices)}</div>
    }

    getPriceArray(prices){
        return prices.map((price)=>{
            return price === null? <div></div>:<div>{price.toString()}</div>
        })
    }

    handleCalculation(){
        let price = this.state.price;
        let n = this.state.n;
        let params = {prices:price,n:n};
        service.yacht(params).then((res)=>{
            notification.success({
                key: '计算成功',
                message: "结果已计算完毕",
                description: '请查看..'
            });
            console.log(res.data)
            this.setState({result:res.data});
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    handleChangeN(e){
        let n = parseInt(e.target.value,0);
        console.log(n);
        this.setState({n:n})
    }
    handleChangePrices(e){
        this.setState({price:e.target.value})
    }
    render(){
        const res = this.getResult();
        const lower = this.getLowPrices();
        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 663 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>动态规划</Breadcrumb.Item>
                  <Breadcrumb.Item>游艇租金</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">
                    长江游艇俱乐部在长江上设置了n个游艇出租站1,2,…,n。游客可在这些游艇出租站租用游艇，并在下游的任何一个游艇出租站归还游艇。游艇出租站i到游艇出租站j之间的租金为r(i,j)。试着设计一个算法，计算处从游艇出租站1到游艇出租站n所需要的最少租金。 <br/>
                    输入：n和相应规模的r(i,j) 。注意j>i，所以r(i,j)只有n-1行。例如:<br/>
                           3 <br/>
                           5    15<br/>
                                 7<br/>
                    表示n=3, <br/>
                    r(1,2) = 5 <br/>
                    r(1,3) = 15 <br/>
                    r(2,3) = 7 <br/>
                    输出：最少租金
                    </p>                   
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">此题输入为一个价格数组，i,j下标表示i->j的价格(不是最低价格),传入后，根据动态规划的思想，将问题缩小，逐步求解，最后得出一个最低价格数组，即i,j下标表示i->j的最低价格，返回0->n-1则可得到第一站到最后一站的最低价格</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值</p>
                    <div className="calculation">
                        站数:<Input onChange={(e)=>this.handleChangeN(e)}/>
                        价格矩阵:<Input style={{width:300}} placeholder="请输入价格矩阵，数字之间用,号隔开" onChange={(e)=>this.handleChangePrices(e)}/>
                        <Button style={{marginLeft:'20px'}} onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    <div className="result">
                       {res}
                       {lower}
                    </div>
                </div>
              </div>
            </div>
        )
    }
}

export default YachtRentals;